<template>
  <div style="display: inline-block;text-align: left;">
    <el-button type="primary" size="mini" @click="openAdd">{{$t('table.add')}}</el-button>
    <el-dialog :visible.sync="dialogTableVisible" v-if="dialogTableVisible" :title="$t('table.add')" width="40%">
      <el-form ref="formData" :model="formData" :rules="rules" label-position="right" label-width="auto">
        <el-form-item :label="$t('table.overtime_period_name')" prop="overtime_name">
          <el-input label="right" type="text" v-model="formData.overtime_name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('table.start_time')" prop="begin_time">
          <el-time-picker v-model="formData.begin_time" value-format="HH:mm" format="HH : mm" align="right" @change="calcTime">
          </el-time-picker>
        </el-form-item>
        <el-form-item :label="$t('table.end_time')" prop="end_time">
          <el-time-picker v-model="formData.end_time" value-format="HH:mm" format="HH : mm" align="right" @change="calcTime">
          </el-time-picker>
        </el-form-item>
        <el-form-item :label="$t('table.over_time')" prop="overtime">
          <el-input-number v-model="formData.overtime" controls-position="right" :min="0" style="150px" size="small" disabled></el-input-number>
          {{$t('attendance.min')}}
        </el-form-item>
        <el-form-item :label="$t('table.remark')" prop="desc">
          <el-input label="right" type="textarea" v-model="formData.desc"></el-input>
        </el-form-item>
        <el-form-item align=" right">
          <div>
            <el-button type="primary" size="small" @click="submitForm()">{{$t('table.complete')}}</el-button>
            <el-button size="small" @click="closeDia()">{{$t('table.cancel')}}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import store from "@/store";
import { addInfo } from "@/api/attendance_management/overtime_setting";

export default {
  data() {
    return {
      dialogTableVisible: false,
      formData: {
        overtime_name: null,
        begin_time: null,
        end_time: null,
        overtime: 0,
        desc: null,
      },
      rules: {
        overtime_name: [
          {
            required: true,
            message: this.$t("validation.overtime_period_name"),
            trigger: "blur",
          },
        ],
        begin_time: [
          {
            required: true,
            message: this.$t("validation.select_data"),
            trigger: "blur",
          },
        ],
        end_time: [
          {
            required: true,
            message: this.$t("validation.select_data"),
            trigger: "blur",
          },
        ],
        overtime: [
          { required: false, message: "请输入加班时长", trigger: "blur" },
        ],
        desc: [
          {
            required: false,
            message: this.$t("validation.remark"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    openAdd() {
      this.dialogTableVisible = true;
    },
    submitForm() {
      console.log("formData---------->", this.formData);

      this.$refs.formData.validate((valid) => {
        if (!valid) {
          return;
        } else {
          // 添加
          this.formData.begin_time = this.formData.begin_time + ":00";
          this.formData.end_time = this.formData.end_time + ":00";
          addInfo(store.getters.token, this.formData).then((res) => {
            if (res.data.status) {
              this.$message.success(this.$t("table.add_complete"));
              this.$emit("getList");
              this.closeDia();
            } else {
              this.$message.error(this.$t("table.add_fail"));
            }
          });
        }
      });
    },
    // 关闭弹窗
    closeDia() {
      this.dialogTableVisible = false;
      this.formData = {
        overtime_name: null,
        begin_time: null,
        end_time: null,
        overtime: 0,
        desc: null,
      };
    },
    // 计算加班时间
    calcTime() {
      if (this.formData.end_time && this.formData.begin_time) {
        let hour =
          (this.formData.end_time.split(":")[0] -
            this.formData.begin_time.split(":")[0]) *
          60;
        let min =
          this.formData.end_time.split(":")[1] -
          this.formData.begin_time.split(":")[1];
        this.formData.overtime = hour+min
      }
      console.log(this.formData.overtime);
    },
  },
};
</script>

<style scoped>
</style>